Bootstrap Snippet Masonry Layout using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="masonry-effect">
    <div class="item" style="height: 400px;"><a href="https://fjolt.com/article/css-grid-masonry" target="_blank">View Article</a></div>
    <div class="item" style="height: 200px;">Item 2</div>
    <div class="item" style="height: 350px;">Item 3</div>
    <div class="item" style="height: 210px;">Item 4</div>
    <div class="item" style="height: 600px;">Item 5</div>
    <div class="item" style="height: 320px;">Item 6</div>
    <div class="item" style="height: 80px;">Item 7</div>
    <div class="item" style="height: 450px;">Item 8</div>
    <div class="item" style="height: 600px;">Item 9</div>
    <div class="item" style="height: 320px;">Item 10</div>
    <div class="item" style="height: 80px;">Item 11</div>
    <div class="item" style="height: 450px;">Item 12</div>
</div>
<script>
let mainId = 'masonry-effect';
let itemIdentifier = '#masonry-effect .item';
document.addEventListener('DOMContentLoaded', function(e) {
    // Programmatically get the column width
    let item = document.querySelector(itemIdentifier);
    let parentWidth = item.parentNode.getBoundingClientRect().width;
    let itemWidth = item.getBoundingClientRect().width + parseFloat(getComputedStyle(item).marginLeft) + parseFloat(getComputedStyle(item).marginRight);
    let columnWidth = Math.round((1 / (itemWidth / parentWidth)));
    // We need this line since JS nodes are dumb
    let arrayOfItems = Array.prototype.slice.call( document.querySelectorAll(itemIdentifier) );
    let trackHeights = {};
    arrayOfItems.forEach(function(item) {
        // Get index of item
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    #masonry-effect {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    a {
      color: white;
      font-size: 2rem;
      font-weight: 800;
    }
    .item {
        flex-direction: column;
        margin-right: 1.5rem;
        margin-bottom: 1.5rem;
      color: white;
        position: relative;
        width: calc(33.3% - 1.5rem);
        background: linear-gradient(45deg, #281dd4, #a42bff);
        border-radius: 12px;
        padding: 1rem;
        font-size: 1.25rem;
        box-sizing: border-box;
        font-variation-settings: 'wght' 600;
    }
    .item:nth-of-type(5) {
        background: linear-gradient(45deg, #d4581d, #ffbe2b);
    }
    .item:nth-of-type(3) {
        background: linear-gradient(45deg, #d41d71, #a42bff);
    }
    .item:nth-of-type(1) {
        background: linear-gradient(45deg, #1d5ed4, #2bbbff);
    }
    .item:nth-of-type(9), .item:nth-of-type(7) {
        background: linear-gradient(45deg, #85d41d, #2bd8ff);
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Masonry Layout"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Masonry Layout" Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Masonry Layout"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY